<template>
  <div class="form-edit-view-config">
    <span>视图:</span>
    <a-select allowClear placeholder="请选择视图" v-model="innerViewId" style="width: 150px">
      <a-select-option v-for="view in formDefinition.views" :key="view.id" :value="view.id">
        {{ view.viewName}}
      </a-select-option>
    </a-select>

    <span>权限:</span>
    <a-select allowClear placeholder="请选择权限" v-model="innerActionId" style="width: 150px">
      <a-select-option v-for="action in formDefinition.actions" :key="action.id" :value="action.id">
        {{ action.actionName }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FormMenuEditViewsConfig',
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    viewId: createProps(String),
    actionId: createProps(String)
  },
  computed: {
    innerActionId: {
      get() {
        return this.actionId;
      },
      set(v) {
        this.$emit('update:actionId', v);
      },
    },
    innerViewId: {
      get() {
        return this.viewId;
      },
      set(v) {
        this.$emit('update:viewId', v);
      },
    }
  }
};
</script>
<style>
.form-edit-view-config > * {
  margin-right: 10px;
}
.form-edit-view-config {
  display: flex;
  align-items: center;
}
</style>